import _classnames from "classnames";
import React, { ForwardedRef, forwardRef, useMemo } from "react";
import { SizeType } from "../../component/SizeEnum";
import _styles from "./styles.module.less";
export type TextTag = 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  type?: 'secondary' | 'default' | 'link';
  size?: SizeType;
  delete?: boolean;
  disabled?: boolean;
  no_wrap?: boolean;
  tag?: TextTag;
}
export const Text = forwardRef<HTMLElement, TextProps>(
  (props: TextProps, ref: ForwardedRef<HTMLElement>) => {
    const {
      type = 'default',
      className,
      delete: _delete = false,
      size = 'm',
      no_wrap = true,
      tag = 'span',
      ..._p
    } = props;

    const _classname = useMemo(() => _classnames(
      _styles.text,
      _styles[`text_${type}`],
      _styles[`${tag}_text_size_${size}`],
      _styles[`${tag}_text_line_height_${size}`], {
      [_styles.text_delete_line]: _delete,
      [_styles.text_no_wrap]: no_wrap
    }, className
    ), [type, tag, size, _delete, no_wrap, className])

    return React.createElement(tag, { ..._p, className: _classname, ref })
  }
)